<template>
  <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <div class="flex items-center space-x-2">
        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
          <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h1 class="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">数字心桥</h1>
      </div>

      <!-- 桌面导航 -->
      <nav class="hidden md:flex items-center space-x-8">
        <a href="#features" class="text-gray-600 hover:text-blue-600 transition-colors">产品特色</a>
        <a href="#solutions" class="text-gray-600 hover:text-blue-600 transition-colors">解决方案</a>
        <a href="#about" class="text-gray-600 hover:text-blue-600 transition-colors">关于我们</a>
        <router-link to="/login" class="text-gray-600 hover:text-blue-600 transition-colors">登录/注册</router-link>
        <router-link to="/login" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-2 rounded-full shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5">
          立即开始
        </router-link>
      </nav>

      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-gray-600 focus:outline-none" @click="isMenuOpen = !isMenuOpen">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- 移动端导航菜单 -->
    <div class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full transform transition-transform duration-300 ease-in-out" :class="{ 'translate-y-0': isMenuOpen, '-translate-y-full': !isMenuOpen }">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="#features" class="text-gray-600 hover:text-blue-600 py-2 transition-colors">产品特色</a>
        <a href="#solutions" class="text-gray-600 hover:text-blue-600 py-2 transition-colors">解决方案</a>
        <a href="#about" class="text-gray-600 hover:text-blue-600 py-2 transition-colors">关于我们</a>
        <router-link to="/login" class="text-gray-600 hover:text-blue-600 py-2 transition-colors">登录/注册</router-link>
        <router-link to="/login" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 rounded-full shadow-md hover:shadow-lg transition-all">
          立即开始
        </router-link>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue';

// 移动端菜单状态
const isMenuOpen = ref(false);
</script>
